﻿@using ViewRes
@using System.Collections.Generic
@using DataLayer.Entities
@model DonutMgmtSystemFoundation.Models.DonutListsModel

@section Title{
    @Shared.MyDonuts
}

@section Pagename{
    @Shared.MyDonuts
}

@section Styles{
    @Styles.Render("~/bundles/jqueryui")
    <style type="text/css">
        .donuts-spaces, .donuts-selected
        {
            /*list-style-type: none;*/
            margin: 0;
            background: #eee;
            padding: 15px;
            width: 90%;
            min-height: 100px;
            overflow: hidden;
        }


        #available-container li
        {
            width: 120px;
            height: 100px;
            margin: 0 10px 10px 0;
            float: left;
            display: block;
        }

        #selected-container li
        {
            height: 100px;
            margin-bottom: 10px;
            width: 100%;
        }

        .selected-div
        {
            float: left;
            width: 300px;
            overflow: hidden;
        }

        .selected-span
        {
            float: left;
            top: 25px;
        }

        .selected-image
        {
            float: left;
        }

        .placeholder
        {
            background-color: #00ff21;
            width: 95%;
        }

        .save-button
        {
            float: right;
            position: relative;
            right: 25px;
            display: block;
        }

        .container-grid
        {
            top: -50px;
            position: relative;
        }
    </style>
}



@section Scripts{
    @Scripts.Render("~/bundles/jquery-ui")
    <script type="text/javascript">
        $(function () {
            $(".save-button").click(function () {
                var jsonData = [];
                var $donuts = $("#selected-container .item").each(function () {
                    var $image = $(this).find("img");
                    var id = $image.attr("donut-id");
                    var $span = $(this).find("span.order");
                    var order = $span.html();

                    var item = {
                        "DonutId":id,
                        "OrderNum":order
                    };
                    jsonData.push(item);
                });

                $.ajax({
                    type: "POST",
                    dataType: "json",
                    contentType: 'application/json',
                    url: "@Url.Action("SaveMyDonuts", "Donuts")",
                    data: JSON.stringify(jsonData),
                    beforeSend: function () {
                        $("#message-icon").removeClass("red").removeClass("green").removeClass("remove").removeClass("checkmark")
                        $("#message").html("");
                        $("#loader").addClass("active");
                    },
                    success: function updateFields(data) {
                        if (data.Success) {
                            $("#message-icon").addClass("green").addClass("checkmark");
                        } else {
                            $("#message-icon").addClass("red").addClass("remove");
                        }
                        $("#message").html(data.Message);
                        $('.dimmer').dimmer('show');
                    },
                    complete: function () {
                        $("#loader").removeClass("active");
                    }
                });
            });

            $(".donuts-spaces").sortable({
                connectWith: ".donuts-selected",
                placeholder: 'selected-space',
                receive: function (event, ui) {
                    var $content = ui.item.find(".possible-content");
                    $content.removeClass("content")
                    $content.find(".name").html("");
                    $content.find(".description").html("");
                }
            });

            $(".donuts-selected").sortable({
                connectWith: ".donuts-spaces",
                stop: function (event, ui) {
                    reOrder();
                    checkElementsInSelectedDonuts();
                },
                receive: function (event, ui) {
                    ui.item.mousedown(function () {
                        $("#available-container").sortable("enable");
                    });
                    ui.item.mouseup(function () {
                        checkElementsInSelectedDonuts();
                    });

                    var name = ui.item.find("img").attr('donut-name');
                    var des = ui.item.find("img").attr('donut-des');

                    var $content = ui.item.find(".possible-content");
                    $content.addClass("content")
                    // Add description and name
                    $content.find(".name").html("<span class='order' />. " + name);
                    $content.find(".description").html(des);

                    checkElementsInSelectedDonuts();
                    reOrder();
                }
            });

            $("#available-container, #selected-container").disableSelection();

            $(".donuts-selected .item").mousedown(function () {
                $("#available-container").sortable("enable");
            });

            var $toggle = $('.prefsRandom');
            $toggle.click(function () {
                var value = $(this).attr('data-value');

                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "@Url.Action("SaveMyPrefersRandom", "Donuts")",
                    beforeSend: function () {
                        $("#message-icon").removeClass("red").removeClass("green").removeClass("remove").removeClass("checkmark")
                        $("#message").html("");
                        $("#loader").addClass("active");
                    },
                    success: function updateFields(data) {
                        if (data.Success) {
                            $("#message-icon").addClass("green").addClass("checkmark");
                            if (value == "true") {
                                $toggle.removeClass('green');
                                $toggle.attr('data-value', "false");
                                $toggle.html('@Donuts.RandomDeactivated');
                            } else {
                                $toggle.addClass('green');
                                $toggle.attr('data-value', "true");
                                $toggle.html('@Donuts.RandomActivated');
                            }
                        } else {
                            $("#message-icon").addClass("red").addClass("remove");
                        }
                        $("#message").html(data.Message);
                        $('.dimmer').dimmer('show');
                    },
                    complete: function () {
                        $("#loader").removeClass("active");
                    }
                });
            });

            checkElementsInSelectedDonuts();
            reOrder();
        });

        function reOrder() {
            $('#selected-container').children('.item').each(function () {
                var index = $("#selected-container .item").index(this) + 1;
                $(this).find('span.order').html(index);
            });
        }

        function checkElementsInSelectedDonuts() {
            var children = $("#selected-container .item").length;
            if (children >= 3) {
                $("#available-container").sortable("disable");
            } else {
                $("#available-container").sortable("enable");
            }
        }
    </script>
}

@section HeaderSection{
    <input type="button" name="save" value="@Shared.Save" class="ui blue button save-button"/>
}

<div class="ui two columns grid container-grid">
    <div class="two column row">
        <div class="column">
            <h3 class="ui header">@Donuts.AvailableDonuts</h3>
            <div id="available-container" class="donuts-spaces ui five items">
                @foreach (Donut donut in Model.AvailableDonuts)
                {
                    <div class="donut-space item">
                        <div class="image">
                            <img src="@donut.Url" donut-id="@donut.DonutId" donut-name="@donut.Name" donut-des="@donut.Description" />
                        </div>
                        <div class="possible-content">
                            <div class="name"><span class="order"></span></div>
                            <div class="description"></div>
                        </div>
                    </div>
                }
            </div>

        </div>
        <div class="column">
            <h3 class="ui header">@Donuts.AvailableDonuts</h3>
            <div id="selected-container" class="donuts-selected ui three items">
                @foreach (DonutPreference donut in Model.PreferedDonuts)
                {
                    <div class="donut-selected item">
                        <div class="image">
                            <img src="@donut.Donut.Url" donut-id="@donut.Donut.DonutId" donut-name="@donut.Donut.Name" donut-des="@donut.Donut.Description" />
                        </div>
                        <div class="content possible-content">
                            <div class="name"><span class="order">@donut.OrderNumber</span>. @donut.Donut.Name</div>
                            <div class="description">@donut.Donut.Description</div>
                        </div>
                    </div>
                }
            </div>
        </div>
    </div>
</div>
<div class="ui clearing divider"></div>
<div class="ui right aligned grid">
    <div class="row">
        <div class="column">
            <h4 class="ui header">@Donuts.RandomDonuts</h4>
                @if (ViewBag.CurrentUser.PrefersRandom)
                {
                    <div class="ui green button prefsRandom" data-value="true">
                        @Donuts.RandomActivated
                    </div>
                }else{
                    <div class="ui button prefsRandom" data-value="false">
                        @Donuts.RandomDeactivated
                    </div>
                }
            </div>
        </div>
    </div>
</div>
<!-- Page dimmer -->
<div class="ui page dimmer">
    <div class="content">
        <div class="center">
            <h2 class="ui inverted icon header">
                <i id="message-icon" class="icon circular inverted emphasized"></i>
                <span id="message"></span>
            </h2>
        </div>
    </div>
</div>
<!-- Loader dimmer -->
<div id="loader" class="ui page dimmer">
    <div class="ui large text loader">@Shared.Loading</div>
</div>
